接触React项目快两个月了，还在研究摸索各种知识点的过程中，充实且幸福。

在项目中学习新知识，还是很有效率的，一边写项目，一边实验新的知识点，比如react hooks！嘻嘻嘻~~~

写了好一段时间class组件了，想尝试尝试函数式组件，之前也有试过，但是一碰到需要使用state的地方，只能又把function改成了class，心塞塞，然后没事刷博客，看到了react hooks，有一种缺什么，就有什么新知识冒出来的感觉。

1、State Hook，使用state

import { useState } from 'react';function Example() {  const [count, setCount] = useState(0);  //const [age, setAge] = useState(42);  //const [fruit, setFruit] = useState('banana');  //const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);  return (    
     
      
      
You clicked {count} times
      
       setCount(count + 1)}>        Click me          
     
  );}

2、Effect Hook，使用生命周期，在第一次render和每次update后触发useEffect

import { useEffect } from 'react'；

function FriendStatusWithCounter(props) {  const [count, setCount] = useState(0);  useEffect(() => {    document.title = `You clicked ${count} times`;  });  const [isOnline, setIsOnline] = useState(null);  useEffect(() => {    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);    return () => {      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    };  });  function handleStatusChange(status) {    setIsOnline(status.isOnline);  }  // ...

 如果只是像class组件那样，在事件函数中通过setState设置表格数据，表格不会及时更新，需要结合useEffect使用！

function App() {  const [data, setData] = useState({ hits: [] });  const [query, setQuery] = useState('redux');  const [search, setSearch] = useState('redux');  useEffect(() => {    const fetchData = async () => {      const result = await axios(        `http://hn.algolia.com/api/v1/search?query=${search}`,      );      setData(result.data);    };    fetchData();  }, [search]);  return (    
           
       setQuery(event.target.value)}      />      
       setSearch(query)}>        Search            
      
               {data.hits.map(item => (          
       
            {item.title}          
        ))}      
      
    
       );}